<template>
    <div class="container">
      <div class="order_item" v-for="order in orders" :key="order.id">
        <div class="header">
          <p class="create_time">订单时间：{{ order.created_at }}</p>
          <p class="status">{{getStatus(order.status) }}</p>
        </div>
        <van-card
          v-for="goods in order.order_goods_infos"
          :key="goods"
          :num="goods.count"
          :price="((goods.goods_info.price || 0) / 100).toFixed(2)"
          :desc="goods.goods_info.detail_info"
          :title="goods.goods_info.name"
          :thumb="goods.goods_info.pic_url"
        />
        <div class="footer">
          <div v-if="order.status!==1">
            支付方式：{{getPayType(order.pay_type)}}
          </div>
          <div>总金额：￥{{(order.price/100).toFixed(2) }}</div>
        </div>
      </div>
    </div>
  </template>
  
  <script setup>
  import { onMounted, ref, defineProps } from "vue";
  import { orderList } from "@/api/order";
  
  let orders = ref([]);
  
  let props = defineProps({
    status: {
      type: Number,
    },
  });
  
  let getStatus=(status)=>{
      switch(status){
          case 1:
              return "待支付";
          case 2:
              return "待发货";
          case 3:
              return "待收货";
          case 4:
              return "待评价";
      }
  }
  
  let getPayType=(type)=>{
      switch(type){
          case 1:
              return "微信";
          case 2:
              return "支付宝";
          case 3:
              return "云闪付";
      }
  }
  
  // 组件挂载完成 自动查询 全部订单
  onMounted(async () => {
    // status  从父组件 传递的 不同的值
    let res = await orderList({ page: 1, limit: 100, status: props.status });
    console.log(res);
    orders.value = res.data.list || [];
  });
  </script>
  
  <style lang="scss" scoped>
  .container {
    --van-card-background: #f0f0f0;
    .order_item {
      padding: 10px;
      margin: 10px;
      background: #fff;
      border-radius: 12px;
      .header {
        display: flex;
        justify-content: space-between;
        font-size: 12px;
        .create_time {
          color: #2f3640;
        }
        .status {
          color: #353b48;
        }
      }
      .goods_item {
        margin: 5px 0;
        background: #f0f0f0;
        border-radius: 10px;
      }
      .footer {
        font-size: 10px;
        color: #2f3640;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 2px;
      }
    }
  }
  </style>
  
  